<template>
  <div class="search-container">
    <form action="/">
    <van-search
        show-action
        v-model="searchText"
        placeholder="请输入搜索关键词"
        shape="round"
        @focus="isRestultShow = false"
        background="#3296fa"
        @cancel="$router.back()"
        @search="onSearch(searchText)"
    >
    <div slot="left" class="left-arrow">
        <van-icon color="#fff" size="20" @click="$router.back()" center name="arrow-left" />
    </div>
    </van-search>
</form>
<div class="search-content">
 <!-- 搜索结果 -->
    <search-result :searchText="searchText" v-if=isRestultShow></search-result>
<!-- 搜索联想建议 -->
    <search-suggestion @search="onSearch" :searchText="searchText" v-else-if="searchText"></search-suggestion>
  <!-- 搜索历史 -->
    <search-history @search="onSearch" v-else></search-history>
</div>
  </div>
</template>

<script>
import SearchHistory from '@/views/search/components/searchHistory'
import SearchSuggestion from '@/views/search/components/searchSuggestion'
import SearchResult from '@/views/search/components/searchResult'
import { setItem } from '@/utils/storage'
export default {
  name: "SearchIndex",
  components :{
     SearchHistory ,
     SearchSuggestion,
     SearchResult
  },
  data() {
    return {
      searchText: '',
      isRestultShow:  false,
      searchHistories: []
    };
  },
  watch: {
      
  },

  mounted() {},

  methods: {
      onSearch (searchText) {
          console.log('1112');
          this.searchText = searchText
          
          //数据持久化
          const index = this.searchHistories.indexOf(this.searchText)
          if(index !== -1) {
            this.searchHistories.splice(index,1)
            
          }
            this.searchHistories.unshift(this.searchText)
            setItem('search-history',this.searchHistories)
          //展示搜索结果
          this.isRestultShow = true
      },
  },
};
</script>

<style lang="less" scoped>
.search-container {
    .search-content{
        position: fixed;
        right: 0;
        left: 0;
        bottom: 0;
        top: 60px;
        overflow-y: auto;
    }
    /deep/.van-search{
        .left-arrow{
        display: flex;
        align-items: center;
        margin-right: 20px;
      }
      .van-search__action{
          color: #fff;
          font-size: 14px;
          background: unset;
      }
    }
}
</style>